@charset "utf-8";
$fontsize:40;
@function r($px) {
    @return $px/$fontsize * 1rem;
}

.web {
    .shippingBox {
        .screen_h {
            background: white;
            border-bottom: 0;
            font-weight: 600;
            span:nth-child(2) {
                font-size: r(26);
                color: #009fe8;
            }
        }
    }
    section {
        .screen_size {
            margin-top: 0;
            height: r(292);
            ul {
                width: r(600);
                margin: r(30);
                .size_active {
                    border: r(1) solid black;
                }
                li {
                    cursor: pointer;
                    transition: 2s;
                    &:hover {
                        background: #009fe8;
                        color: white;
                    }
                }
            }
            .size_ul li {
                margin-top: r(30);
            }
        }
        .color_font {
            width: 100%;
            height: r(100);
            border-bottom: r(1) solid #d9d9d9;
            p {
                margin-left: r(30);
                font-size: r(19);
                color: #828282;
                line-height: r(100);
                font-weight: 600;
                display: inline-block;
            }
            .sax {
                font-size: r(30);
                color: #e3e3e3;
            }
            span {
                float: right;
                margin-right: r(30);
                color: #4a4a4a;
                font-size: r(27);
                line-height: r(100);
            }
        }
        .man:hover{
            i{
                display: block;
            }
        }
        .cloth_color {
            ul {
                margin-left: r(30);
                margin-top: r(65);
                li {
                    transition: 1s;
                    i {
                        position: absolute;
                        top: r(500);
                        color: transparent;
                        transition: all .2s ease;
                    }
                    &:hover,
                    &:focus,
                    &:active {
                        border: r(1) solid black;
                        i {
                            top: r(570);
                            color: white;
                        }
                    }
                    
                    &:nth-child(1){
                        i{
                            left: r(50);
                        }
                    }
                    &:nth-child(2){
                        i{
                            left: r(175);
                        }
                    }
                    &:nth-child(3){
                        i{
                            left: r(300);
                        }
                    }
                    &:nth-child(4){
                        i{
                            left: r(425);
                        }
                    }
                }
            }
        }
        .man,.woman{
            p{
                transition: 1s;
            }
            >span{
                i{
                    position: absolute;
                    right: r(0);
                    transition: all .3s ease;
                    color: transparent;
                }
            }
            &:hover,
            &:focus,
            &:active
            {
                p{
                    color: black;
                }
                i{
                    color: skyblue;
                    display: block;
                    right: r(50);
                }
            }
        }
    }
}